<template>
	<view class="p-top20 p-bot30">
		<view class="Info">
			<view class="d-flex f-column">
				<text class="pending">待处理(元)</text>
				<text class="pending_money">{{info.uncheck_money}}</text>
			</view>
			<view class="row m-top30">
				<view class="d-flex f-column">
					<text class="h6 black">全部申请（笔）</text>
					<text class="size40 black">{{info.allCount}}</text>
				</view>
				<view class="d-flex f-column m-left50">
					<text class="h6 black">累计金额（元）</text>
					<text class="size40 black">{{info.allMoney}}</text>
				</view>
			</view>
		</view>

		<view class="Tab">
			<u-tabs :list="list1" :scrollable="false" lineColor="#000000" :activeStyle="activeStyle"
				:inactiveStyle="inactiveStyle" :itemStyle="itemStyle" lineHeight="2" @click="changeTab"></u-tabs>
		</view>

		<view class="list" :class="item.state == '0'?'color_99':'color_33'" v-for="(item,index) in pageData" :key="index"
			@click="toUrl(`withdrawDetails?id=${item.id}`)">
			<view class="row j-sb a-center">
				<view class="flex-1 d-flex a-center">
					<image :src="$imgUrls(item.v_headimg)" mode="aspectFill" class="headImg"></image>
					<text class="size28 m-right20">{{item.v_nickname}}</text>
					<text class="h6">{{item.v_tel}}</text>
				</view>
				<text class="h6">{{item.state | State}}</text>
			</view>
			<view class="row a-center">
				<view class="flex-1 size26 m-top20 p-right20">{{item.cardInfo}}</view>
				<view class="d-flex a-center">
					<text class="h6">￥</text>
					<text class="size32">{{item.applyMoney}}</text>
				</view>

			</view>
		</view>

	


		<emptys title="暂无相关内容" v-if="!pageData.length"></emptys>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list1: [{
					name: '全部',
					state: ''
				}, {
					name: '待处理',
					badge: {
						value: 0,
					},
					state: 1,
				}, {
					name: '已处理',
					state: 2,
				}, {
					name: '已拒绝',
					state: 0,
				}],
				activeStyle: {
					color: '#000',
					fontSize: '30rpx'
				},
				inactiveStyle: {
					color: '#333',
					fontSize: '26rpx'
				},
				itemStyle: {
					height: '38px'
				},
				state: '', //  1待处理 ;2已处理；0拒绝 3:提现中
				page: 1,
				limit: 10,
				More: true,
				info: '',
				pageData: []
			}
		},
		onLoad() {
			this.getWithdrawal()
		},
		methods: {
			getWithdrawal() {
				this.$showLoading('')
				this.$http.get({
					url: '/WokersApi/getWithdrawal',
					data: {
						state: this.state,
						page: this.page,
						limit: this.limit,
					}
				}).then(res => {
					this.$hideLoading()
					if (res.code != 200) return this.$Toast(res.msg)
					const result = res.data
					const Data = result.list || []
					if (result.uncheck_count) this.list1[1].badge.value = result.uncheck_count
					this.info = result
					
					this.page == 1 ? this.pageData = Data : this.pageData = [...this.pageData, ...Data]
					if (Data.length < this.limit) this.More = false
				})
			},
			
			changeTab(e) {
				this.page = 1
				this.More = true
				this.state = e.state
				this.getWithdrawal()
			}
		},
		filters: {
			State(Val) {
				let state_txt;
				switch (Val) {
					case '1':
						state_txt = '待处理'
						break;
					case '2':
						state_txt = '已处理'
						break;
					case '0':
						state_txt = '已拒绝'
						break;
					case '3':
						state_txt = '提现中'
						break;
				}
				return state_txt

			}
		},
		onReachBottom() {
			if (!this.More) return
			this.page++
			this.getWithdrawal()
		}
	}
</script>
<style>
	page {
		background-color: #f8f8f8;
	}
</style>
<style lang="scss" scoped>
	.Info {
		width: 710rpx;
		margin: 0 auto;
		padding: 30rpx;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		border-radius: 10rpx;
	}

	.pending {
		color: #000;
		font-size: 30rpx;
	}

	.pending_money {
		color: #000;
		font-size: 42rpx;
		margin-top: 10rpx;
	}

	.Tab {
		width: 100%;
		height: 80rpx;
		background-color: #f8f8f8;
		margin-top: 10rpx;
	}

	.list {
		width: 710rpx;
		margin: 20rpx auto 0;
		background-color: #ffffff;
		padding: 24rpx;
		border-radius: 10rpx;
	}

	.headImg {
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;
		margin-right: 10rpx;
	}
</style>